<template>
	<view>
		<view class="inv-h-ws">
			<view style="display: flex;align-items: center;"> 
				<view @click="goReturn()">
					<u-icon name="arrow-left" color="#fff" size="30"></u-icon>
				</view>
				<view :class="['inv-hs',Inv==0?'inv-h-ses':'']" @click="Inv=0">
					<view class="tab-cen">
						<view>点评列表</view>
					</view>
				</view>
			</view>			
			<view class="gu">顾客晒</view>
			<view :class="['inv-hs',Inv==1?'inv-h-ses':'']" @click="Inv=1">
				<view class="tab-cen">
					<view>问答</view>
				</view>
			</view>		
		</view>
		<!-- 点评 -->
		<view class="" v-show="Inv == 0">
			<view class="content">
				<view class="comment-nb">
					<view class="comment-left">
						<view class="left-top-text">
							<text class="left-left">4.8</text>
							<text>很棒</text>
						</view>
						<view class="left-name">2345条</view>
						<u-rate :count="count" active-color="#00C6C2" :disabled="true" gutter="20" v-model="value"></u-rate>
					</view>
					<view class="comment-right">
						<view class="right-top">
							<text class="text-right">专业</text>
							<u-line-progress :show-percent="false" height="10" active-color="#00C6C2" :percent="80"></u-line-progress>
							<text>4.6</text>
						</view>
						<view class="right-top">
							<text class="text-right">服务</text>
							<u-line-progress :show-percent="false" height="10" active-color="#00C6C2" :percent="80"></u-line-progress>
							<text>4.6</text>
						</view>
						<view class="right-top">
							<text class="text-right">效果</text>
							<u-line-progress :show-percent="false" height="10" active-color="#00C6C2" :percent="80"></u-line-progress>
							<text>4.6</text>
						</view>
						<view class="right-top">
							<text class="text-right">环境</text>
							<u-line-progress :show-percent="false" height="10" active-color="#00C6C2" :percent="80"></u-line-progress>
							<text>4.6</text>
						</view>
					</view>
				</view>
				<view class="risk-tab-top">
					<view class="risk-tab-cont" @click="tabChange(index)" v-for="(item,index) in tabList " :class="[activeIndex == index?'risk-active':'']"
					 :key="index">{{item}}</view>
					<view class="risk-active-line" :class="{'risk-active-line-f':activeIndex == 0,'risk-active-line-r':activeIndex==1,'risk-active-line-s':activeIndex==2}"></view>
				</view>
				<view class="risk-cont">
					<view v-show="activeIndex == 0">
						<view class="comment-cen">
							<view class="comment-cen-top">
								<text class="cen-top-name">技术很好232</text>
								<text>效果满意321</text>
								<text>服务态度2313</text>
								<text>服务态度2313</text>
								<text>服务态度2313</text>
							</view>
							<view class="commod">
								<view class="commod-img">
									<image src="/static/nv.jpg" mode=""></image>
								</view>
								<view class="commod-right">
									<view class="commod-name">
										<text>加菲猫aa</text>
										<text class="commod-name1">2019/12/12</text>
									</view>
									<view class="rate">
										<u-rate :count="count" active-color="#F2CB51" :disabled="true" gutter="6" v-model="value" size="19"></u-rate>
										<text>5.0分</text>
									</view>
									<view class="text-rights">
										让我再看你一遍 从南到北 像是被五环路蒙住的双眼 请你 再讲一遍 关于那天 抱着盒子的姑娘 和擦汗的男人 我sss
									</view>
									<view class="rights-img">
										<image src="/static/nan.jpg" mode=""></image>
			
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-show="activeIndex == 1">22222222</view>
					<view v-show="activeIndex == 2">333333333</view>
				</view>
			
			
			</view>
				
		</view>
		<!-- 问答 -->
		<view class="" v-show="Inv == 1">
			<view class="wen-cen">
				<view class="wen-1">
					<view>问</view>
					<text>烫一个发型大概需要多少钱？</text>
				</view>
				<view class="wen-2">
					<view>答</view>
					<text>只烫不染的短发多少钱？头发比较干，不知道能不能做？</text>
				</view>
				<view class="wen-bom">
					<view class="wen-bom-top">
						<view>
							<text style="font-size: 20rpx;color: #8E8E8E;">打酱油的了</text>
							<text style="display: inline-block;padding: 3rpx;font-size: 20rpx;color: #00c6c2;border: 1rpx solid #00c6c2;">设计师</text>
						</view>
						<view style="font-size: 20rpx; color: #E8E8E8;">2019/12/25</view>
					</view>
					<view style="font-size: 20rpx;color:  #00c6c2;">共12条回答</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Inv: 0,
				tabList: ['全部', '有图(71)', '差评(9)'],
				activeIndex: 0,
				count: 5,
				value: 5,


			}
		},
		methods: {
			goReturn(){
				uni.navigateBack({
					delta:1
				})
			},
			tabChange(val) {
				this.activeIndex = val;
				console.log(val);
			},
			changeTab(Inv) {
				that.navIdx = Inv;
			},

		}
	}
</script>

<style lang="scss">
	.wen-cen{
		padding:42rpx 32rpx ;
		background-color: #fff;
		border-bottom: 5rpx solid #EEEEEE;
		
		.wen-1{
			display: flex;
			align-items: center;
			
			view{
				padding: 5rpx;
				background-color: #00c6c2;			
				font-size: 22rpx;
				font-family: Adobe Heiti Std;
				font-weight: bold;
				color: #FFFFFF;
				margin-right: 10rpx;
			}
			text{			
				font-size: 30rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #282828;
			}
		}
		.wen-2{
			display: flex;
			align-items: center;
			
			view{
				padding: 5rpx;
				background-color: #000000;
				font-size: 22rpx;
				font-family: Adobe Heiti Std;
				font-weight: bold;
				color: #FFFFFF;
				margin-right: 10rpx;
			}
			text{
				font-size: 24rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #8E8E8E;
			}
		}
		.wen-bom{
			padding: 20rpx 0 0 50rpx;
			
			.wen-bom-top{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
	.inv-h-ws {
		padding: 44rpx 200rpx 20rpx 20rpx;
		background-color: #00c6c2;
		display: flex;
		align-items: center;
		justify-content: space-between;
	
		.tab-cen {
			padding:15rpx;
			
		}
	}
	
	.inv-hs {
		
		font-size: 36rpx;
		color: #000;
	}
	.gu{	
		font-size: 30rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #282828;
	}
	.inv-h-ses {	
		font-size: 36rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #FFFFFF;
	}

	.risk-tab-top {

		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000;
		display: flex;
		padding: 20rpx 256rpx 20rpx 20rpx;
		position: relative;
		justify-content: space-between;
		border-bottom: 1rpx solid #F1F1F1;

		.risk-tab-cont {
			padding: 0 10rpx;
			font-size: 28rpx;

			font-family: PingFang;
			font-weight: 500;

		}

		.risk-active {
			color: #000;
		}

		.risk-active-line {
			width: 30px;
			height: 3px;
			background: rgba(0, 255, 255, 1);
			position: absolute;
			top: 35px;
			left: 36px;
			transition: all 0.3s ease;
		}

		.risk-active-line-f {
			left: 4%;
		}

		.risk-active-line-r {
			left: 27%;
		}

		.risk-active-line-s {
			left: 53%;
		}
	}

	.comment-nb {
		padding: 30rpx 18rpx;
		display: flex;
		border-bottom: 6rpx solid #E0E0E0;

		.comment-left {
			width: 50%;
			border-right: 1rpx solid #F1F1F1;
			text-align: center;

			.left-top-text {
				padding: 10rpx 0;
				font-size: 26rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #333333;

				.left-left {
					font-size: 60rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #000000;
				}
			}

			.left-name {
				padding: 10rpx 0;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #5A5A5A;
			}
		}

		.comment-right {
			width: 50%;
			padding: 15rpx 0 0 45rpx;


			.right-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 5rpx 0;

				.text-right {
					font-size: 26rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #333333;
				}

				u-line-progress {
					display: flex;
					// align-items: center;					
					width: 150rpx;
					height: 10rpx;
				}
			}
		}
	}

	.comment-cen {
		// padding:0 25rpx;

		.comment-cen-top {
			padding-top: 40rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			text {
				display: inline-block;
				padding: 11rpx 18rpx;
				border-radius: 45rpx;
				background-color: #EEEEEE;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #282828;
				margin-left: 24rpx;
				margin-bottom: 22rpx;
			}

			.cen-top-name {
				background-color: #00c6c2;
				color: #FFFFFF;
			}
		}

		.commod {
			padding: 20rpx;
			border-bottom: 2rpx solid #E0E0E0;
			display: flex;

			.commod-img {
				width: 20%;

				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
				}
			}

			.commod-right {
				// width: 80%;

				.rights-img {
					width: 100%;
					height: 300rpx;
					border-radius: 4rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.text-rights {
					padding: 20rpx 0;
					font-size: 24rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #333333;
				}

				.rate {
					display: flex;
					align-items: center;
					font-size: 22rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #212121;
				}

				.commod-name {
					padding: 5rpx 0;
					font-size: 24rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #333333;

					text {
						margin-right: 20rpx;
					}

					.commod-name1 {
						font-size: 20rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #8B8B8B;
					}
				}
			}
		}
	}

	.comment {
		padding: 18rpx 25rpx;
		background-color: #eeeeee;
		display: flex;

		text {
			display: inline-block;
			padding: 14rpx 25rpx;
			background-color: #fff;
			font-size: 24rpx;
			font-family: PingFang;
			font-weight: 500;
			margin-right: 25rpx;
		}

		.comment-1 {
			color: #00c6c2;
		}
	}
</style>
